﻿@page "/components/spinner"

<Pager Title="Spinner" Description="Indicate the loading state of a component or page with Bootstrap spinners"
Indicates="@(new[]{"Example","Colors","Grow","Size","With Button"})">
		<Demo Title="Example">
		<Description>
			
		</Description>
		<Run>
			<Spinner/>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Spinner/>
```
			")
		</Code>
	</Demo>
			<Demo Title="Colors">
		<Run>
			<Spinner Color="Color.Primary" />
			<Spinner Color="Color.Secondary" />
			<Spinner Color="Color.Info" />
			<Spinner Color="Color.Success" />
			<Spinner Color="Color.Warning" />
			<Spinner Color="Color.Danger" />
			<Spinner Color="Color.Light" />
			<Spinner Color="Color.Dark" />
		</Run>
		<Code>
			@MD.Write(@"
```html
<Spinner Color=""Color.Primary"" />
<Spinner Color=""Color.Secondary"" />
<Spinner Color=""Color.Info"" />
<Spinner Color=""Color.Success"" />
<Spinner Color=""Color.Warning"" />
<Spinner Color=""Color.Danger"" />
<Spinner Color=""Color.Light"" />
<Spinner Color=""Color.Dark"" />
```
			")
		</Code>
	</Demo>
			<Demo Title="Grow">
		<Description>
			
		</Description>
		<Run>
			<Spinner Grow/>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Spinner Grow/>
```
			")
		</Code>
	</Demo>
			<Demo>
		<Run>
			<Spinner Color="Color.Primary" Grow/>
			<Spinner Color="Color.Secondary" Grow/>
			<Spinner Color="Color.Info" Grow/>
			<Spinner Color="Color.Success" Grow/>
			<Spinner Color="Color.Warning" Grow/>
			<Spinner Color="Color.Danger" Grow/>
			<Spinner Color="Color.Light" Grow/>
			<Spinner Color="Color.Dark" Grow/>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Spinner Color=""Color.Primary"" Grow/>
<Spinner Color=""Color.Secondary"" Grow/>
<Spinner Color=""Color.Info"" Grow/>
<Spinner Color=""Color.Success"" Grow/>
<Spinner Color=""Color.Warning"" Grow/>
<Spinner Color=""Color.Danger"" Grow/>
<Spinner Color=""Color.Light"" Grow/>
<Spinner Color=""Color.Dark"" Grow/>
```
			")
		</Code>
	</Demo>
		<Demo Title="Size">
		<Description>
			Set <code>Small</code> to make a smaller spinner that can quickly be used within other components.
		</Description>
		<Run>
			<Spinner Small/>
			<Spinner Small Grow/>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Spinner Small/>
<Spinner Small Grow/>
```
			")
		</Code>
	</Demo>
		<Demo Title="With Button">
		<Description>
			Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.
		</Description>
		<Run>
			<Button Disabled>
				<Spinner Small/>
			</Button>
			
			<Button Disabled>
				<Spinner Small/>
				Loading
			</Button>

			<Button Disabled>
				<Spinner Small Grow/>
			</Button>
			
			<Button Disabled>
				<Spinner Small Grow/>
				Loading
			</Button>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Button Disabled>
	<Spinner Small/>
</Button>

<Button Disabled>
	<Spinner Small/>
	Loading
</Button>

<Button Disabled>
	<Spinner Small Grow/>
</Button>
			
<Button Disabled>
	<Spinner Small Grow/>
	Loading
</Button>
```
			")
		</Code>
	</Demo>
</Pager>